<template>
  <div class="content">
    <div>
      <MySearch :form-inline="formInline" @searchFn="searchFn">
        <template>
          <el-col :span="8">
            <el-form-item label="仓库编号" prop="code">
              <el-input v-model="formInline.code" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库名称" prop="name">
              <el-input v-model="formInline.name" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库状态" prop="status">
              <el-select v-model="formInline.status" placeholder="请选择" clearable>
                <el-option label="全部" :value="null" />
                <el-option label="停用" value="0" />
                <el-option label="启用" value="1" />
              </el-select>
            </el-form-item>
          </el-col>
        </template>
      </MySearch>
    </div>
    <div class="table">
      <div>
        <MyTable :table-data="warehouseList" :table-col="tableCol" :current="current" :size="size">
          <template #btn>
            <div>
              <el-button
                class="add"
                @click="$router.push({name:'warehouse-detile', params: {id:'null'}})"
              >新增仓库</el-button>
            </div>
          </template>
          <template #edit="props">
            <el-button type="text" size="small" @click="$router.push({name:'warehouse-detile', params: {id:props.status.id}})">编辑</el-button>
            <el-button type="text" size="small" @click="editStatus(props.status)">{{ status(props.status.status) }}</el-button>
            <el-button type="text" size="small" @click="delFn(props.status)">删除</el-button>
          </template>
        </MyTable>
      </div>
      <div>
        <MyPage :total-page="totalPage" @changeSize="changeSize" @changeCurrent="changeCurrent" />
      </div>
    </div>
  </div>
</template>

<script>
import MySearch from '@/components/MySearch'
import MyTable from '@/components/MyTable'
import MyPage from '@/components/MyPage'
import { warehousePage, editWarehouse, delWarehouse } from '@/api'
// import router from '@/router'
export default {
  components: { MySearch, MyTable, MyPage },
  data() {
    return {
      formInline: {},
      warehouseList: [],
      tableCol: [
        { prop: 'code', label: '仓库编码', width: '150px' },
        { prop: 'name', label: '仓库名称', width: '150px' },
        { prop: 'type', label: '仓库类型', width: '150px' },
        { prop: 'location', label: '省/市/区', width: '200px' },
        { prop: 'address', label: '详细地址', width: '150px' },
        { prop: 'textstatus', label: '仓库状态', width: '150px' },
        { prop: 'surface', label: '仓库面积m²', width: '150px' },
        { prop: 'includedNum', label: '库区数量', width: '150px' },
        { prop: 'personName', label: '负责人', width: '150px' },
        { prop: 'phone', label: '联系电话', width: '150px' },
        { prop: 'updateTime', label: '更新时间', width: '200px' }
      ],
      totalPage: null,
      size: 10,
      current: 1
    }
  },
  async created() {
    await this.warehouseFn(this.formInline, this.size, this.current)
  },
  methods: {
    // 请求
    async warehouseFn(obj, size, current) {
      const res = await warehousePage({
        ... obj,
        current,
        size,
        descs: 'createTime'
      })
      this.totalPage = Number(res.data.data.total)
      this.warehouseList = res.data.data.records
      // 数据处理
      this.warehouseList.forEach(item => {
        if (item.type === 'ZZ') {
          item.type = '中转仓'
        } else if (item.type === 'JG') {
          item.type = '加工仓'
        } else if (item.type === 'CB') {
          item.type = '储备仓'
        } else {
          item.type = '冷藏仓'
        }
        if (item.status === 0) {
          item.textstatus = '停用'
        } else {
          item.textstatus = '启用'
        }
      })
      return res.data
    },
    // 搜索
    async searchFn() {
      const res = await this.warehouseFn(this.formInline, this.size, this.current)
      console.log(res)
    },
    // 改变页数
    async changeSize(val) {
      this.size = val
      await this.warehouseFn(this.formInline, this.size, this.current)
    },
    async changeCurrent(val) {
      this.current = val
      await this.warehouseFn(this.formInline, this.size, this.current)
    },
    // 修改状态
    editStatus(data) {
      this.$confirm(`确定要${this.status(data.status)}：${data.name} 吗？`, `确认${this.status(data.status)}`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await editWarehouse({ id: data.id, status: data.status === 1 ? 0 : 1 })
        await this.warehouseFn(this.formInline, this.size, this.current)
        this.$message({
          type: 'success',
          message: `${this.status(data.status)}成功!`
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: `已取消${this.status(data.status)}`
        })
      })
    },
    async delFn(data) {
      this.$confirm(`确定要删除吗？`, `提示`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delWarehouse(data.id)
        await this.warehouseFn(this.formInline, this.size, this.current)
        this.$message({
          type: 'success',
          message: `删除成功!`
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: `已取消删除`
        })
      })
    },
    // 状态显示
    status(status) {
      return status === 1 ? '停用' : '启用'
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/my-form.scss';
</style>
